<template>
  <div>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="$goBack"
    />
    <img :src="detailData.goodsCoverImg" />
    <h3 style="margin-left: 12px; margin-bottom: 28px;">{{ detailData.goodsName}}</h3>
    <p style="margin-left: 12px; margin-bottom: 20px;">{{ detailData.goodsIntro}}</p>
    <div class="shop-type" style="margin-left: 12px;">免邮费 顺丰快递</div>
    <div class="price">¥{{ detailData.sellingPrice}}</div>
    <van-goods-action>

      <van-goods-action-button
        color="#6bd8d8"
        type="warning"
        text="加入购物车"
        @click="addshopcar"
      />
      <van-goods-action-button color="#0dc3c3" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  methods:{
    addshopcar(){
      //将当前商品数据存入缓存
      //detailData

      //存之前先获取购物车数据，再将详情数据push金购物车数据
      let arr=localStorage.getItem("shopCarData") ? JSON.parse(localStorage.getItem("shopCarData")) :[]
      this.detailData.num=1
      this.detailData.checked=true
      let newArr=[...arr,this.detailData] //...扩展运算符

      localStorage.setItem("shopCarData",JSON.stringify(newArr))
      this.$router.push("/shopcar");
    }
  },
  created(){
    this.detailData=this.$route.params
  }
};
</script>

<style>
img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-bottom:40px;
}
.shop-type {
  color: #b0b0b0;
}
.price {
  margin-left: 12px;
  margin-top: 16px;
  font-size: 24px;
  color: red;
}
.butleft {
  border-radius: 20px 0 0 20px;
}
.butright {
  border-radius: 0 20px 20px 0;
}
</style>